<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文章管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{{ url_for('static',filename='layuiadmin/layui/css/layui.css') }}" media="all">
    <link rel="stylesheet" href="{{ url_for('static',filename='layuiadmin/style/admin.css') }}" media="all">
</head>
<body>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-btn-group test-table-btn" style="margin-bottom: 10px;" id="data_bar"
                         lay-filter="data_bar">
                        <button type="button" class="layui-btn" lay-event="add">添加数据</button>
                    </div>

                    <table class="layui-hide" id="test-table" lay-filter="test-table"></table>
                    <script type="text/html" id="content-bar">
                        <a class="layui-btn layui-btn" lay-event="content_info">查看</a>
                    </script>

                    <script type="text/html" id="test-table-barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 展示图片大小 -->
<style type="text/css">
    .layui-table-cell {
        text-align: center;
        height: auto;
        white-space: normal;
    }

    .layui-table img {
        max-width: 100px
    }
</style>


<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form " action="" lay-filter="dataFrm" id="dataFrm">

        <div class="layui-form-item">
            <div class="layui-col-md10">
                <label class="layui-form-label">标题：</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="title" lay-verify="required" placeholder="请输入名称" autocomplete="off"
                               class="layui-input">
                    </label>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-md10">
                <label class="layui-form-label">图片：</label>
                <div class="layui-input-block">
                    <input type="text" name="article_img" lay-verify="required" placeholder="请输入图片地址" autocomplete="off"
                           class="layui-input">
                    <button type="button" class="layui-btn" id="upload_btn">上传图片</button>

                </div>

            </div>
        </div>

{#        <div class="layui-form-item">#}
{#            <div class="layui-col-md10">#}
{#                <label class="layui-form-label">内容：</label>#}
{#                <div class="layui-input-block">#}
{#                    <label>#}
                        {#                        <input type="text" name="content" lay-verify="required" placeholder="请输入简介" autocomplete="off"#}
                        {#                               class="layui-input">#}
{#                        <textarea placeholder="请输入内容" class="layui-textarea" name="content"></textarea>#}
{#                    </label>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}

{#        <div class="layui-form-item">#}
{#            <div class="layui-col-md10">#}
{#                <label class="layui-form-label">发布人(作者)：</label>#}
{#                <div class="layui-input-block">#}
{#                    <label>#}
{#                        <input type="text" name="author" lay-verify="required" placeholder="请输入发布人" autocomplete="off"#}
{#                               class="layui-input">#}
{#                    </label>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}

        <div class="layui-form-item">
            <div class="layui-col-md10">
                <label class="layui-form-label">日期：</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="article_time" lay-verify="required" placeholder="2021-01-01" autocomplete="off"
                               class="layui-input">
                    </label>
                </div>
            </div>
        </div>



{#        <div class="layui-form-item">#}
{#            <div class="layui-col-md10">#}
{#                <label class="layui-form-label">分类：</label>#}
{#                <div class="layui-input-block">#}
{#                    <select name="type_id" id="type_id" lay-filter="type_id">#}
{#                        <option value="">请选择</option>#}
{#                        {% for i in article_type %}#}
{#                            <option value="{{ i.id }}">{{ i.title }}</option>#}
{#                        {% endfor %}#}
{#                    </select>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}


        {#        <div class="layui-form-item">#}
        {#            <label class="layui-form-label">绑定作家(作品)：</label>#}
        {#            <div id="cat_ids">#}
        {#            </div>#}
        {#        </div>#}

{#        <div class="layui-form-item" pane="">#}
{#            <label class="layui-form-label">作家：</label>#}
{#            <div class="layui-input-block">#}
{#                {% for i in goods_store %}#}
{#                    <input type="checkbox" name="goods_store" title="{{ i.name }}" lay-skin="primary" value="{{ i.id }}"#}
{#                           class="otherinfo">#}
{##}
{#                {% endfor %}#}
{#            </div>#}
{#        </div>#}

{#        <div class="layui-form-item" pane="">#}
{#            <label class="layui-form-label">绑定作品：</label>#}
{#            <div class="layui-input-block">#}
{#                {% for i in goods %}#}
{#                    <input type="checkbox" name="goods_id" title="{{ i.name }}" lay-skin="primary" value="{{ i.id }}"#}
{#                           class="otherinfo">#}
{##}
{#                {% endfor %}#}
{#            </div>#}
{#        </div>#}


        {#        <div class="layui-form-item">#}
        {#            <div class="layui-col-md10">#}
        {#                <label class="layui-form-label">优先级：</label>#}
        {#                <div class="layui-input-block">#}
        {#                    <input type="text" name="priority" placeholder="请输入优先级" autocomplete="off"#}
        {#                           class="layui-input">#}
        {#                </div>#}
        {#            </div>#}
        {#        </div>#}

        <input type="hidden" name="article_id" id="article_id">


        <div class="layui-form-item" style="margin-top:40px; ">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="doSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>


    </form>
</div>
<!-- 添加和修改的弹出层结束 -->


<script src="{{ url_for('static',filename='layuiadmin/layui/layui.js') }}"></script>
<script>
    layui.config({
        base: '../../../static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'jquery', 'layer', 'form', 'upload', "tree", 'util'], function () {
        var admin = layui.admin;
        var table = layui.table;
        var upload = layui.upload;
        var tree = layui.tree;
        var util = layui.util;
        var $ = layui.jquery;
        {#var selectN = layui.selectN;#}
        {#var selectM = layui.selectM;#}

         show_img = function (t) {
            var t = $(t).find("img");
            //页面层
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                {#area: ['70%', '90%'], //宽高#}
                area: [$(t).width + 'px', $(t).height + 'px'], //宽高
                shadeClose: true, //开启遮罩关闭
                end: function (index, layero) {
                    return false;
                },
                content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
            });
        };


        var tableIns = table.render({
            elem: '#test-table',
            {#toolbar: "#data_bar",#}
            url: '/cms/mall/article_info/',
            cols: [[
                {field: 'article_id', title: 'ID', sort: true, align: 'center', hide: true},
                {field: 'title', title: '标题', sort: true, align: 'center'},
                {
                    field: 'article_img',
                    title: '图片',
                    align: 'center',
                    templet: function (d) {
                        return '<div onclick="show_img(this)" ><img src="' + d.article_img + '" alt=""></a></div>';
                    }
                },
                {#{title: '内容', align: 'center', toolbar: '#content-bar'},#}
                {#{field: 'type_name', title: '分类', align: 'center'},#}
                {#{field: 'type_id', title: '分类id', align: 'center', hide: true},#}
                {#{field: 'author', title: '发布人', align: 'center'},#}
                {field: 'article_time', title: '日期', align: 'center'},
                {#{field: 'works_name', title: '作品', align: 'center'},#}

                {#{field: 'priority', title: '优先级', align: 'center', sort: true,},#}
                {#{field: 'create_time', title: '创建时间', sort: true, align: 'center'},#}
                {align: 'center', fixed: 'right', title: '操作', toolbar: '#test-table-barDemo'}
            ]]
            , page: true
        });


        // 添加数据按钮事件
        $('.test-table-btn .layui-btn').on('click', function () {
            openAdd()
        });


        //监听工具条
        table.on('tool(test-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('您确定要删除么?', function (index) {
                    $.ajax({
                        url: '/cms/mall/del_article/',
                        type: "POST",
                        data: data,
                        success: function (data) {
                            if (data['code'] == 200) {
                                //关闭弹框
                                layer.close(mainIndex);
                                //显示提示框
                                layer.msg("成功", {icon: 6});
                                tableIns.reload()
                            } else {
                                layer.msg(data['message'], {icon: 5});
                            }
                        }
                    });
                    return false;
                });
            } else if (obj.event === 'edit') {
                openUpdate(data);
            } else if (obj.event === 'content_info') {
                layer.alert(JSON.stringify(data['content']))
            }
        });


        var url;
        var mainIndex;

        //打开添加页面
        function openAdd() {
            mainIndex = layer.open({
                type: 1,
                title: '添加数据',
                content: $("#saveOrUpdateDiv"),
                {#area: ['600px', '450px'],#}
                area: ['80%', '80%'],
                success: function (index) {
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                    // 清空id数据
                    document.getElementById("article_id").value = "";
                    layui.form.render();
                }
            });
        }

        //打开修改页面
        function openUpdate(data) {
            mainIndex = layer.open({
                type: 1,
                title: '修改数据',
                content: $("#saveOrUpdateDiv"),
                {#area: ['600px', '450px'],#}
                area: ['80%', '80%'],
                success: function (index) {
                    layui.form.val("dataFrm", data);
                }
            });
        }


        //保存
        layui.form.on("submit(doSubmit)", function (obj) {
            //序列化表单数据
            {#var params = $("#dataFrm").field();#}
            var data = obj.field;

            /*obj = document.getElementsByName("goods_id");
            var check_val = [];
            for (k in obj) {
                if (obj[k].checked)
                    check_val.push(obj[k].value);
            }
            var goods_id_list = check_val.join(",");
            data['goods_id_list'] = goods_id_list;

            obj2 = document.getElementsByName("goods_store");
            var check_val2 = [];
            for (j in obj2) {
                if (obj[j].checked)
                    check_val2.push(obj2[j].value);
            }
            var goods_store_list = check_val2.join(",");
            data['goods_store_list'] = goods_store_list;*/

            console.log(data);
            $.ajax({
                url: '/cms/mall/update_article/',
                type: "POST",
                data: data,
                success: function (data) {
                    if (data['code'] == 200) {
                        //关闭弹框
                        layer.close(mainIndex);
                        //显示提示框
                        layer.msg("成功", {icon: 6});
                        tableIns.reload()
                    } else {
                        layer.msg(data['message'], {icon: 5});
                    }
                }
            });
            return false;

        });


        // 上传图片
        var imgInput = $("input[name='article_img']");
        upload.render({
            elem: '#upload_btn' //绑定元素
            , url: '/cms/cms_upload/' //上传接口
            , done: function (res) {
                if (res.code == 200) {
                    imgInput.val(res.data.url);
                } else {
                    layer.msg(res.message)
                }
            }
            , error: function () {
                layer.msg('上传失败')
            }
        });

        var linkInput = $("input[name='big_img']");
        upload.render({
            elem: '#upload_btn2' //绑定元素
            , url: '/cms/cms_upload/' //上传接口
            , done: function (res) {
                if (res.code == 200) {
                    linkInput.val(res.data.url);
                } else {
                    layer.msg(res.message)
                }
            }
            , error: function () {
                layer.msg('上传失败')
            }
        });

        /* 多级选择框
        function getTreeData() {
            $.ajax({
                url: '/cms/author_works/',
                type: "GET",
                //data: data,
                success: function (data) {


        {#data_list = data['data'];#}
                    console.log(data);
                    //无限级分类-基本配置
                    var catIns1 = selectN({
                        //元素容器【必填】
                        elem: '#cat_ids'
                        , search: [false, true]
                        //候选数据【必填】
                        , data: data['data']
                    });
                }
            });
        }

        getTreeData();*/

    });
</script>
</body>
</html>